<template>
  <div class="table-list-view">
    <!-- 实时报警信息 -->
    <template v-if="public.chartType == 15">
      <TransitionTable v-show="tableInfo.tableData.length" :data="tableInfo.tableData" :preview="public.tablePre" :columns="tableInfo.header" :table-css="tableCss"> </TransitionTable>
      <a-empty v-show="!tableInfo.tableData.length" />
    </template>
    <!-- 实时工单 -->
    <template v-if="public.chartType == 16">
      <TransitionTable v-show="tableInfoOrder.tableData.length" :data="tableInfoOrder.tableData" :preview="public.tablePre" :columns="tableInfoOrder.header" :table-css="tableCss"> </TransitionTable>
      <a-empty v-show="!tableInfoOrder.tableData.length" />
    </template>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { getChartInfo } from '../../../apis/home-pv'
import TransitionTable from './transition-table.vue'

const props = defineProps({
  public: {
    type: Object,
    default: () => {
      return {}
    }
  },
  configType: {
    type: Number,
    default: 1
  },
  deviceSn: {
    type: String,
    default: ''
  }
})
const tableCss = {
  columns: {
    color: props.public.tablePre == 1 ? 'var(--color-text-1)' : '#FFFFFF',
    background: 'rgba(52, 144, 227, 0.05)'
  },
  data: {
    color: props.public.tablePre == 1 ? 'var(--color-text-1)' : '#FFFFFF',
    background: 'rgba(52, 144, 227, 0.1)'
  }
}
const tableInfo = ref<any>({
  cardName: '',
  header: [],
  tableData: []
})

const tableInfoOrder = ref<any>({
  cardName: '',
  header: [],
  tableData: []
})

const fetchData = async () => {
  if (!props.public.cardKey || !props.public.dashboardConfigId) {
    return
  }
  try {
    const params = {
      configId: props.public.dashboardConfigId,
      cardKey: props.public.cardKey,
    }
    const res: any = await getChartInfo(params)
    console.log('大屏表格code===', res.data.code)
    if (res.data.code === 200) {
      if (props.public.chartType == 15) {
        tableInfo.value.cardName = res.data.data.cardName
        tableInfo.value.header = res.data.data.tableInfo?.header
        tableInfo.value.tableData = res.data.data.tableInfo ? res.data.data.tableInfo.tableData : []
      } else if (props.public.chartType == 16) {
        tableInfoOrder.value.cardName = res.data.data.cardName
        tableInfoOrder.value.header = res.data.data.tableInfo?.header
        tableInfoOrder.value.tableData = res.data.data.tableInfo ? res.data.data.tableInfo.tableData : []
      }
    } else {
      if (props.public.chartType == 15) {
        tableInfo.value.cardName = ''
        tableInfo.value.header = []
        tableInfo.value.tableData = []
      } else if (props.public.chartType == 16) {
        tableInfoOrder.value.cardName = ''
        tableInfoOrder.value.header = []
        tableInfoOrder.value.tableData = []
      }
    }
  } catch (error) {
    console.error('获取图表数据时出错:', error)
  } finally {
  }
}

onMounted(() => {
  fetchData()
})
</script>
<style lang="less" scoped>
.table-list-view {
  width: 100%;
  height: 100%;
  color: #ffffff;
  margin-top: 6px;
}

.arco-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>
